<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!--GENHTML INSERT ^^ ================================================================-->
<!--
12/15: Add a doctype spec on line 1 so IE does fixed footer positioning at bottom.
But use HTML 4 (not 5) spec, so images in tables look as they did with no doctype.
Makes some things render diff (e.g, tables at top, and having hdrs), but no worse.
More details: https://en.wikipedia.org/wiki/Quirks_mode#Comparison_of_document_types.
-->
<!--END INSERT========================================================================-->


<HTML>

<HEAD>

<!--GENHTML INSERT====================================================================-->

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!--
For this file only: UTF-8 Unicode encoding, for non-ASCII or non-English characters.
If omitted, browsers may guess, but often fall back on US-ASCII or user settings.
Update Dec-2018: move the <meta> encoding declaration above this comment, and 
the _META_ genhtml tag to the top of <head> if needed, so <meta> is in the first 
1024 bytes of the file per HTML5 standard.  Nonconforming pages work fine in all 
20+ browsers tested, though Firefox issues a warning in its web console, and some
may restart the page parse - a minor performance penalty.  Not an issue in thumbspage 
output, app user guides, showcode pages, or unzipped programs' Apache index pages. 
-->
<!--END INSERT========================================================================-->


<!--GENHTML INSERT====================================================================-->
<!--
Recoded Aug-18 to use relative path, after broken by https:// conversion: can't mix 
http:// page resources (see .htaccess note).  This required regenerating and uploading 
all .html files, but not hundreds of manual page edits - genhtml works!  Formerly 
used ICON-DEFAULT, which has now-dated docs on icon links and filetypes in general.
An icon file in the root folder suffices on some (but not all) web servers.
-->

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

<!--END INSERT========================================================================-->


<!--GENHTML INSERT====================================================================-->
<!--
7/6/14: Google Analytics JavaScript (JS) code in <HEAD> (normally).
Used only to isolate high-traffic pages for dev work, iff JS and tracker enabled. 
The former training sites's id: ga('create', 'UA-52578333-1', 'auto').
The book site's id, now used for all: ga('create', 'UA-52579036-1', 'auto').
JavaScript is also used if enabled for thumbspage dynamic image scaling.
Jun-2019: tell Google Analytics to anonymize IP address on receipt for privacy.
More: https://developers.google.com/analytics/devguides/collection/analyticsjs/.
-->

<SCRIPT>
  // Start async JS-file fetch, if not already cached

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  // Queue actions to run in order after async JS-file fetch finished

  ga('create', 'UA-52579036-1', 'auto');       // Create tracker object (and queue)
  ga('set', 'anonymizeIp', true);              // Anonymize IP addr (&aip) [Jun-2019]
  ga('send', 'pageview');                      // Send page-view event now 
</SCRIPT>

<!--END INSERT========================================================================-->


<!--GENHTML INSERT====================================================================-->
<!--this insert serves two purposes: stylesheet and mobile viewport-->

<!--
Nov-15: CSS file, code in <HEAD>, for fonts, borders, navbars, code, etc.
This could also use an in-page <STYLE> sheet, as genhtml pastes any text.
-->

<link rel="stylesheet" type="text/css" href="_main.css">

<!--
Feb-18: Add a mobile-friendly viewport tag to every page's HEAD.
Fits content to device width, no zoom (user may), impacts MANY formats.
Extend STYLE instead of adding a new insert to avoid all-page updates.
Mobile support required other redesign: toolbar, code blocks, images,... 
-->
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--END INSERT========================================================================-->


<STYLE>
    
/*------------------------------------------------------------------------------------
BANNER FONT - punt here: too jarring to go to subpages with larger title font;
see also similar site-wide option in _main.css (not used), and training-main.css;

H1 {                         
    font-size: 125%;                * 0..360; alt: vw size specs, but not in all wb *
}

@media screen and (min-width: 361px) {
H1 {                         
    font-size: 160%;                * 361..480 *
}
}

@media screen and (min-width: 481px) {
H1 {                         
    font-size: 200%;                * 481+ (seems 200%) *
}
}
*-------------------------------------------------------------------------------------

</STYLE>

<TITLE>Mark Lutz's Books, Software, Etc.</TITLE>

</HEAD>


<!-- NOT full page, post fixed toolbar, border via .css: should match book-links page -->
<!-- <BODY BGCOLOR=white> -->


<STYLE>

/*------------------------------------------------------------------------------------ 
Feb-2021: try a dark-mode experiment, this page only (little text here - only);
really requires a fuller redesign, and this won't match any other pages on the site,
but the white on most of this page is starting to seem jarring on dark macos/phones... 
tries: 000000=black, 202020=darkgrey, 202024=bluetine, 272727=lighter, FFFFFF=white
--------------------------------------------------------------------------------------*/

/* default: light, no preference, or not supported by device|browser */
BODY {
    background-color: white;           /* original => replaced */
}

/* default: drop white everywhere: light grey is better, use it even for light mode */
BODY {
    background-color: #C0C0C0;         /* light|none: light grey */
}


/* dark mode set on device running the browser (else 'light' or ?) */
@media (prefers-color-scheme: dark) { 
    BODY {
        background-color: #808080;     /* dark: slightly darker gray */
    }
}

/*------------------------------------------------------------------------------------*/

</STYLE>

<BODY>    <!-- color from element style -->

<P>




<!-- START COPY: same in index.html/index-book-links.html (copy from/to) -->


<!--
Aug-2020: Add a border around the colored content section, else it can seem as if 
part of the page is missing.  This achieves the 'index card' metaphor better.  Uses 
'1px' instead of 'thin' - Chrome's vanishing hr/img issue doesn't happen here, '1px'
is 'thin' on desktop, and 'thin' is too thin to match the toolbar's border on mobile. 

This costs 2px, which may matter on very small mobiles, but okay on 4" ipod tested.
Also tried lighter 'ivory' instead of 'cornsilk', but too cold on most displays.

  Update: changed whole card to 'ivory; in aug-2021, here and on book-links page;
  'cornsilk' is too saturated and yellow-y on some displays (only).  A different
  theme altogether would be better, but color is very hard to do portably. 

Opted to also use a border in index-book-links, though iffy: it has more page content,
and (like other pages) doesn't use borders otherwise.  Really, that page should 
probably imitate blog/programs/etc layout, but want to keep top book-link images. 
-->


<!-- 
Aug-2020: use media queries to downsize book-link images on smaller viewports to 
avoid some horizontal scrolling on small 4" devices set to use larger iOS 13 page 
zooms.  This isn't ideal (% continuous responsive and non-<table> layouts may be 
better), but a rewrite to emulate the table-based layout here with <div>s failed 
to match the original appearance - and required scrolls anyhow.  More in _main.css.
-->


<STYLE>
/*------------------------------------------------------------
  ==> TEMP REDUNDANT COPY FOR CACHES: DELETE ME SOON <==

Aug-2020: apply viewport clicks to _image_, not table cell.
Should ideally use % continuous to a minimum/maximum (and 
the layout should use float <div>s instead of <table>s), but 
recreating the original layout with that scheme didn't quite 
match, and still required scrolling on small iOS devices.

NOTE: this code is copied to index.html + index-book-links.html
manually and temporarily, to avoid issues with browsers caching
the prior version of _main.css - in which the lack of this code
renders images huge!  DELETE the temp copies after a reasonable
time to allow caches to catch up with that file's new version.
Alt: append a query arg to file URL, but this disables caching.
--------------------------------------------------------------*/

.bookiconimg {                            /* 0..319: watches, 4" ipod @ large font */
    width:  54px;                         /* 75% original */
    height: 71px;
}
.bookiconimgtall {
    width:  34px;
    height: 55px;
}

@media screen and (min-width: 320px) {    /* 320..359, 4" ipod touch, 4" se/5, 4.X" lumia */
.bookiconimg {                            /* 85% oiginal */
    width:  61px;
    height: 81px;
}
.bookiconimgtall {
    width:  38px;
    height: 63px;
}
}

@media screen and (min-width: 360px) {    /* 360+: 4.7" 2020 se; s8/9, note 10/20, fold */
.bookiconimg {                            /* also for tablets, typical desktop windows */
    width:  72px;                         /* originally used for all devices/windows */
    height: 95px;
}
.bookiconimgtall {
    width:  45px;
    height: 74px;
}
}
</STYLE>




<!-- WHOLE 'card': one row =========================================================== -->

<TABLE bgcolor=ivory width="100%" style="border: 1px solid black;">    <!-- was: border=0 -->
<tr>




<!-- LEFT panel: one column ===========================================================-->

<!-- width=50 or the style is required to set a max size on expansion (oddly) -->
<TD valign=top bgcolor=tan style="width: 50px;">


<!-- nested table for book icons -->

<TABLE border=0 class=bookicons>           <!-- feb18: use higher res images here too -->
                                           <!-- dec18: use css borders so ok in chrome at low zoom -->
<tr><td style="padding-bottom: 8px;">      <!-- aug20: use media queries to shrink imgs on small viewports -->
  <A HREF="about-lp.html">    
  <IMG SRC="lp5e-large.jpg" ALIGN=left ALT="[LP5E]" 
       class="borderedimg bookiconimg"></A>          <!--was duller ora-lp5e-tiny.jpg-->

<tr><td style="padding-bottom: 8px;">
  <A HREF="about-pp.html">    
  <IMG SRC="ora-pp4e-large.jpg" ALIGN=left ALT="[PP4E]" 
       class="borderedimg bookiconimg"></A>         <!--was duller ora-pp4e-tiny.jpg-->

<tr><td>
  <A HREF="about-pyref.html"> 
  <IMG SRC="ora-pyref5e-big.jpg" ALIGN=left ALT="[PR5E]" 
       class="borderedimg bookiconimgtall"></A>     <!--was duller ora-pyref5e-tiny.jpg-->

</TABLE>




<!-- RIGHT panel: one column ==========================================================-->

<!-- was: '<TD><TD>' spacers, which grew by 1+ pixels with window; alt: div + margin? -->
<TD style="padding-left: 9px;">

<!-- END COPY -->




<H1><I>Mark Lutz's Books, Software, Etc.</I></H1>


<P>
<I>Welcome</I>.
At this desktop- and mobile-friendly
<A class=subtlelink href="about-this-site.html">website</A>, you can explore:
</P>


<P>
<TABLE border=0 cellpadding=9 cellspacing=3 class=linkstable>

<!-- jan16: drop nowrap, but increase fixed size (see css) -->
<!-- feb18: to shave more pixels for mobile, cellpadding 10 => 9, extra <td> => style -->
<!-- sep18: trim left margin on small (320px) devices, else no right border (see css) -->
  
<TR>
<TD bgcolor=tan align=center> <A class=blocklink HREF="index-book-links.html" style="color: black;">
   <B>Books</B></A>

<TD bgcolor=tan align=center> <A class=blocklink HREF="about-python.html" style="color: black;">
    <B>Python</B></A>

<TR>
<TD bgcolor=tan align=center> <A class=blocklink HREF="programs.html" style="color: black;">
   <B>Programs</B></A>

<TD bgcolor=tan align=center> <A class=blocklink HREF="formalbio.html" style="color: black;">
    <B>Author</B></A>

<TR>
<TD bgcolor=tan align=center> <A class=blocklink HREF="posts.html" style="color: black;">
    <B>Blog</B></A> 

<TD bgcolor=tan align=center> <A class=blocklink HREF="training.html" style="color: black;">
    <B>Training</B></A>

</TABLE>


<P>
You can also click the book images on the left to jump to book titles. 

<P>
This site's latest update: 
<I>Aug-18-2021</I>.
  <!-- hardcode for trivial changes: <I>Jul-6-2018</I>. -->
  <!-- auto for non-trivial changes: <I>Aug-18-2021</I>. -->




<!-- end 'card' ====================================================================== -->

</TD>        <!-- column/panel -->
</TR>        <!-- single row -->
</TABLE>     <!-- 'card' -->
</P>


<!--GENHTML INSERT====================================================================-->
<!--
Nov15: added via genhtml.py, to avoid pasting footer in every file on changes.
See learning-python.com/genhtml.html for other options and their tradeoffs.
Caveat: this is now the same as FOOTERTAN; used to differ for top-level context.
-->

</P>

<!--Feb18: make table responsive, for mobile-friendly scrollbar on small screens -->
<BR><BR>
<DIV class=footerdiv>

<TABLE class=footertable bgcolor=tan width="100%">

<!-- NESTED INSERT: can't nest > 2 deep -->      <!-- gif now is Home, not python.org -->
<TD align=center>                                <!-- border=0 for IE img links       -->
  <A class=blocklinkbar href="index.html">       <!-- scale larger gif for better res -->
  <IMG SRC="PythonPowered.gif" ALT="[Home]" border=0 width=55 height=22></A>  
<TD align=center>
  <A class=blocklinkbar HREF="index-book-links.html">Books</A>
<TD align=center>
  <A class=blocklinkbar HREF="programs.html">Programs</A>
<TD align=center>
  <A class=blocklinkbar HREF="posts.html">Blog</A>
<TD align=center>
  <A class=blocklinkbar HREF="about-python.html">Python</A>
<TD align=center>
  <A class=blocklinkbar HREF="formalbio.html">Author</A>
<TD align=center>
  <A class=blocklinkbar HREF="training.html">Training</A>
<TD align=center>
  <A class=blocklinkbar HREF="sitesearch.html">Search</A>
<TD align=center>
  <A class=blocklinkbar HREF="mailto:lutz@learning-python.com">Email</A>
<!--
<TD align=center>
  <A class=blocklinkbar HREF="#">Top</A>
-->
<TD align=center>
  &copy;<I>M.Lutz</I>
<!-- END NESTED INSERT -->

</TABLE>

</DIV>

<!--END INSERT========================================================================-->


</BODY>
</HTML>


